<template>
  <div class="menuManage">
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="菜单名称" sortable width="180"> </el-table-column>
      <el-table-column prop="code" label="编码"> </el-table-column>
      <el-table-column prop="path" label="菜单路径"> </el-table-column>
      <el-table-column prop="component" label="页面路径"> </el-table-column>
      <el-table-column prop="createDate" label="创建时间"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" style="align-content: center">
        <template #default="scope">
          <el-button @click="addWindow(scope.row.id)" type="el-icon-plus" size="small">+</el-button>
          <el-button @click="updateWindow(scope)" type="success" size="small">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" :title="'新增&修改'" width="580px">
      <el-form :model="addOrUpdateForm">
        <el-form-item label="菜单名称" :label-width="100">
          <el-input v-model="addOrUpdateForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="编码" :label-width="100">
          <el-input v-model="addOrUpdateForm.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单路径" :label-width="100">
          <el-input v-model="addOrUpdateForm.path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="页面代码路径" :label-width="100">
          <el-input v-model="addOrUpdateForm.component" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addOrUpdateData">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { listTree, addData, updateData } from "@/api/sysManager/menuManage";
export default {
  data() {
    return {
      dialogVisible: false,
      isAdd: true, // 默认为新增
      addOrUpdateForm: {
        id: "",
        name: "",
        code: "",
        path: "",
        component: ""
      },
      queryFrom: {
        pageNo: 1,
        pageSize: 10,
        address: "",
        mobile: ""
      },
      tableData: []
    };
  },
  mounted() {
    this.listTree();
  },
  methods: {
    // 获取分页查询数据
    // eslint-disable-next-line vue/no-dupe-keys
    async listTree() {
      let res = await listTree(this.queryFrom);
      if (res.code === 200) {
        this.tableData = Array.of(res.data.menu);
        this.total = res.total;
        if (res.total === 0) {
          this.$message.warning("当前条件未查询到数据");
        }
      }
    },
    addWindow(id) {
      this.dialogVisible = true;
      this.addOrUpdateForm.id = id;
      this.isAdd = true;
    },
    updateWindow(scope) {
      this.dialogVisible = true;
      this.addOrUpdateForm = scope.row;
      this.isAdd = false;
    },
    disableData(scope) {
      this.addOrUpdateForm = scope.row;
      let res = addData(this.addOrUpdateForm);
      if (res.code === 200) {
        this.dialogVisible = false;
        this.listTree();
        this.$message.success(res.msg);
      }
    },
    async addOrUpdateData() {
      if (this.isAdd) {
        this.addData();
        return;
      }
      this.updateData();
    },
    async updateData() {
      let res = await updateData(this.addOrUpdateForm);
      if (res.code === 200) {
        this.dialogVisible = false;
        this.listTree();
        this.$message.success(res.msg);
      }
      return;
    },
    async addData() {
      let res = await addData(this.addOrUpdateForm);
      if (res.code === 200) {
        this.dialogVisible = false;
        this.listTree();
        this.$message.success(res.msg);
      }
      return;
    }
  }
};
</script>
